<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>填写个人信息</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			table{
				margin: 100px auto 20px;
			}
			caption{
				padding-bottom: 15px;
				font-size: 30px;
			}
			tr{
				text-align:center;
			}
			td{
				width: 125px;
				height: 40px;
			}
			td.toInput{
				width: 200px;
			}
			.green{
				height: 10px;
				font-size: 12px;
				padding-left: 10px;
			}
			tr input{
				width: 200px;
				height: 100%;
				border: none;
				outline: none;
				padding-left: 8px;
				font-size: 18px;
			}
			p input:last-child{
				width: 80px;
				height: 30px;
			}
			p{
				margin-left: 50%;
				padding-left: 400px;
			}
	        input.error{
	            background: red;
	        }
		</style>
	</head>
	<body>
		<form action="manager.php" id="registerform">
			<table border="1" cellspacing="0">
				<caption>学生基本信息填写表</caption>
				<thead>
					<tr>
						<td colspan="6" bgcolor="#BFE5D5" class="green" align="left">("*"为必填项)</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>学  号 *</td>
						<td class="toInput"><input type="text" name="stunum" required/></td>
						<td>姓  名 *</td>
						<td class="toInput " colspan="2"><input type="text" name="username" required/></td>
						<td rowspan="4" class="toInput">上传照片</td>
					</tr>
					<tr>
						<td>性  别 *</td>
						<td class="toInput"><input type="text"  name="sex"/></td>
						<td>身份证号 *</td>
						<td class="toInput" colspan="2"><input type="text"  name="personnum"/></td>
					</tr>
					<tr>
						<td>出生日期</td>
						<td class="toInput"><input type="text"  name="birthday"/></td>
						<td>民  族</td>
						<td class="toInput" colspan="2"><input type="text"  name="nation"/></td>
					</tr>
					<tr>
						<td>籍  贯</td>
						<td class="toInput"><input type="text" name="originalarea"/></td>
						<td>政治面貌</td>
						<td class="toInput" colspan="2"><input type="text"  name="politics"/></td>
					</tr>
					<tr>
						<td>学  院</td>
						<td class="toInput"><input type="text"  name="college"/></td>
						<td>专  业</td>
						<td class="toInput"><input type="text" name="major"/></td>
						<td>密  码</td>
						<td class="toInput"><input type="password" name="password"/></td>
					</tr>
					<tr>
						<td>宿舍号</td>
						<td class="toInput"><input type="text"  name="dormnum"/></td>
						<td>邮  编</td>
						<td class="toInput"><input type="text"  name="zipcode"/></td>
						<td>邮 箱</td>
						<td class="toInput"><input type="text" name="email"/></td>
					</tr>
					<tr>
						<td>联系人</td>
						<td class="toInput"><input type="text"  name="familynum"/></td>
						<td>联系地址</td>
						<td class="toInput"><input type="text"  name="address"/></td>
						<td>联系电话</td>
						<td class="toInput"><input type="text"  name="homenum"/></td>
					</tr>
					<tr>
						<td>QQ</td>
						<td class="toInput"><input type="text"  name="qq"/></td>
						<td>爱好特长</td>
						<td class="toInput"><input type="text"  name="hobby"/></td>
						<td>出生地</td>
						<td class="toInput"><input type="text"  name="birtharea"/></td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<td colspan="6" bgcolor="#BFE5D5" class="green"></td>
					</tr>
				</tfoot>
			</table>
			<p><input type="submit"></p>
		</form>
		
	<!--1.引入jQuery-->
    <script src="jquery-3.0.0.min.js"></script>
    <!--2.引入插件-->
    <script src="jquery.validate.min.js"></script>
    <script src="messages_zh.min.js"></script>
    <script>
        // 开始使用并设置校验规则
        $('#registerform').validate();




        //表单提交拦截,一般需要异步提交表单时才拦截
        //默认的提交行为,
        $.validator.setDefaults({
            submitHandler:function(){
//                form.submit;// 默认行为

                $.ajax();// 异步提交表单
            }
        })
		$("#form").validate({
			errorPlacement: function(error, element) {
			}
		});
    </script>
	</body>
</html>
